<template>
    <van-cell class="article-item">
      <div slot="title" class="title van-multi-ellipsis--l2">{{ article.title }}</div>
      <div slot="label">
        <div v-if="article.cover.type===3" class="cover-wrap">
          <div
            class="cover-item"
            v-for="(img,index) in article.cover.images"
            :key="index"
          >
            <van-image
              class="cover-item-img"
              fit="cover"
              :src="img"
            />
          </div>
        </div>
        <div class="label-info-wrap">
          <!-- <span>{{ article.aut_name }}</span> -->
          <!-- <span>{{ article.total_count }}评论</span> -->
          <span @click="fn">{{ article.pubdate }}</span>
        </div>
      </div>
      <van-image
        v-if="article.cover.type===1"
        slot="default"
        class="right-cover"
        fit="cover"
        :src="article.cover.images[0]"
      />
    </van-cell>
</template>

<script>

export default {
  name: "ArticleItem",
  props: {
    article: {
      type: Object,
      required: true,
    }
  },
  data() {
    return {
    
      }
  },
  methods: {
    fn() {
      console.log(this.article);
    }
    
  
    }
  }
</script>
<style lang="less" scoped>
.article-item{
  
  .title{
    color: #3a3a3a;
    font-size: 16px;
  }
  .van-cell__value{
    flex:unset;
    width: 116px;
    height: 73px;
    // 不要给文章标题设置右内边距，因为不是每个文章标题里都有图片
    padding-left: 12px;
  }
  .right-cover{
    width: 116px;
    height: 73px;
  }
  .label-info-wrap span{
    color: #b4b4b4;
    font-size: 12px;
    // margin-right: 12px;
  }
  .cover-wrap{
    display: flex;
    padding: 15px 0;
    .cover-item{
      flex: 1;
      height: 73px;
      // 选择到不包括最后一个元素的item
      &:not(:last-child){
        padding-right: 2px;
      }
      .cover-item-img{
        width: 100%;
        height: 73px;
      }
    }
  }
}
  
</style>
